<template>
  <div id="mentlist"> 

     <div class="demo" :style="{  height: dtheight + 'px' }">
        <div class="databox">

            <div class="item" v-for="(item,index) in mentdata" :key="index"> 
                  <div class="top">
                      <div class="top_item" style="flex: 1;">
                          <img class="top_img" :src="urlimg + item.level_logo" />
                          {{ item.title }}
                      </div>  
                              <!-- {{ getTime_fm() }}
                              {{ getTime(getTime_fm()) }}
                              {{ getTime(item.open_second_start) }}
                              {{ getTime(item.open_second_end) }} -->
                       <div class="top_item">
                            <div class="top_item_but">
                              <span v-if="getTime(getTime_fm()) < getTime(item.open_second_start)">预约中</span>
                              <span v-if="getTime(item.open_second_start) < getTime(getTime_fm()) &&  getTime(getTime_fm())<getTime(item.open_second_end)">开放中</span>
                              <span v-if="getTime(getTime_fm()) > getTime(item.open_second_end)">关闭中</span>
                              <!-- <span v-if="item.is_open == 0">未开放</span>-->
                              <!-- <span v-if="item.is_open == 1">开放中</span> -->
                            </div>
                            
                        </div>
                  </div>
                  <div class="item_a">
                      <div class="item_b">
                          <div class="item_b_1">预约人数</div>
                          <div class="item_b_2">{{ item.appointment_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1">挂卖数量</div>
                          <div class="item_b_2">{{ item.onsale_count }}</div>
                      </div>
                       <div class="item_b">
                          <div class="item_b_1">初始挂卖</div>
                          <div class="item_b_2">{{ item.init_onsale_count }}</div>
                      </div>
                  </div>
                  <div class="item_a" style="margin-top:30px;">
                     <div class="item_b">
                          <div class="item_b_1">进场人数</div>
                          <div class="item_b_2">{{ item.browse_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1">抢拍人数</div>
                          <div class="item_b_2">{{ item.buy_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1">锁单人数</div>
                          <div class="item_b_2">{{ item.locking_count }}</div>
                      </div>
                  </div>
            </div>

        </div>
     </div>
   </div>
</template>

<script>

export default {
   name: 'mentlist',
   props:{
      mentdata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
    }
  },
   components:{

  },
  created(){
      this.dtheight = window.innerHeight - 245
      
  },
  mounted (){
    
  },
  methods: {
 



  }
}
</script>


<style scoped>
.databox{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-top:10px;
}
 .item{
   width: calc(100%/2 - 15px);
   background: white;
   margin-top: 15px;
   padding:15px 15px 30px 15px;
   box-sizing: border-box;
   float: left;
   margin-left: 10px;
       box-shadow: rgb(224, 233, 252) 2px 4px 9px;
 }
  .item:nth-child(1){
   margin-top: 0px;
 }
 .item:nth-child(2){
   margin-top: 0px;
 }
 .item:nth-child(2n){
   margin-left: 15px;
 }
 .top{
    display: flex;
}
 .top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.item_a{
  display:flex;
  margin-top: 20px;
  padding:0px 15px;
}
.item_b{
  flex: 1;
}
.item_b_1{
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #5E6C84;
}
.item_b_2{
  margin-top: 10px;
  text-align: center;
  font-size: 25px;
  font-weight: 500;
  color: #344563;
}
.top_item_but{
    margin-left: 10px;
    height: 28px;
    line-height: 28px;
    width: 60px;
    text-align: center;
    font-size: 12px;
    border-radius:3px;
    color:black;   
    background: #cdd5de;
}
</style>